<template>
	<view style="background: #ffffff; 
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: -1;">
		<view class="notes">
			<p><span>*</span>工单详情</p>
			<!-- <p><span>*</span>请如实上报</p> -->
		</view>
		<view class="uni-common-mt" style="margin-left: 10px;">
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="3">
					<view class="title">流水号：</view>
					<view class="englishInfo">Serial Number</view>
				</u-col>
				<u-col span="8">
					<text class="info">{{workordernumber}}</text>
				</u-col>
			</u-row>
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="3">
					<view class="title">工单日期：</view>
					<view class="englishInfo">WorkDate </view>
				</u-col>
				<u-col span="8">
					<text class="info">{{worktime}}</text>
				</u-col>
			</u-row>
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="3">
					<view class="title">设备号：</view>
					<view class="englishInfo">DeviceNumber</view>
				</u-col>
				<u-col span="8">
					<text class="info">{{serialnumber}}</text>
				</u-col>
			</u-row>
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="3">
					<view class="title">设备类型：</view>
					<view class="englishInfo">DeviceType</view>
				</u-col>
				<u-col span="8">
					<text class="info">{{devicetype}}</text>
				</u-col>
			</u-row>
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="3">
					<view class="title">设备型号：</view>
					<view class="englishInfo">DeviceModel</view>
				</u-col>
				<u-col span="8">
					<text class="info">{{devicemodel}}</text>
				</u-col>
			</u-row>
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="3">
					<view class="title">出厂日期：</view>
					<view class="englishInfo">DeliveryTime</view>
				</u-col>
				<u-col span="8">
					<text class="info">{{deliverytime}}</text>
				</u-col>
			</u-row>
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="3">
					<view class="title">生产组别：</view>
					<view class="englishInfo">ProductionGroup</view>
				</u-col>
				<u-col span="8">
					<text class="info">{{productiongroup}}</text>
				</u-col>
			</u-row>
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="3">
					<view class="title">客户名称：</view>
					<view class="englishInfo">CustomerName</view>
				</u-col>
				<u-col span="8">
					<text class="info">{{customername}}</text>
				</u-col>
			</u-row>
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="3.5">
					<view class="title">生产负责人：</view>
					<view class="englishInfo">ProductionLeader</view>
				</u-col>
				<u-col span="7.5">
					<text class="info">{{productionleader}}</text>
				</u-col>
			</u-row>
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="3.5">
					<view class="title">客户联系人：</view>
					<view class="englishInfo">Contacts</view>
				</u-col>
				<u-col span="7.5">
					<text class="info">{{contacts}}</text>
				</u-col>
			</u-row>
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="3">
					<view class="title">客户电话：</view>
					<view class="englishInfo">CustomerPhone</view>
				</u-col>
				<u-col span="8">
					<text class="info">{{customerphone}}</text>
				</u-col>
			</u-row>
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="3">
					<view class="title">职位：</view>
					<view class="englishInfo">Position</view>
				</u-col>
				<u-col span="8">
					<text class="info">{{position}}</text>
				</u-col>
			</u-row>
			
			<!-- 故障图片   -->
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="3">
					<view class="title">故障图片：</view>
					<view class="englishInfo">Fault Picture</view>
				</u-col>
				<u-col span="8">
					<image src="../../static/showImg.png" style="width: 80px; height: 80px;" @click="faultImg"></image>
				</u-col>
			</u-row>
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="3.5">
					<view class="title">故障描述：</view>
					<view class="englishInfo">Fault Description</view>
				</u-col>
				<u-col span="7.5">
					<text class="info">{{problemdescription}}</text>
				</u-col>
			</u-row>
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="3.5">
					<view class="title">工单状态：</view>
					<view class="englishInfo">status</view>
				</u-col>
				<u-col span="7.5">
					<text class="info">{{status}}</text>
				</u-col>
			</u-row>
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="3">
					<view class="title">完成日期：</view>
					<view class="englishInfo">Finish Date</view>
				</u-col>
				<u-col span="8">
					<text class="info">{{workendtime}}</text>
				</u-col>
			</u-row>
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="3.5">
					<view class="title">派遣人员：</view>
					<view class="englishInfo">DispatchedPersonnel</view>
				</u-col>
				<u-col span="7.5">
					<text class="info">{{dispatchedPersonnel}}</text>
				</u-col>
			</u-row>
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="3">
					<view class="title">备注：</view>
					<view class="englishInfo">Remark</view>
				</u-col>
				<u-col span="8">
					<text class="info">{{remark}}</text>
				</u-col>
			</u-row>
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="3.5">
					<view class="title">售后确认单：</view>
					<view class="englishInfo">After-sales Confirmation</view>
				</u-col>
				<u-col span="7.5">
					<image src="../../static/showImg.png" style="width: 80px; height: 80px;" @click="getImgIndex"></image>
				</u-col>
			</u-row>
			<!-- <u-gap height="3px" bgColor="#ffffff "></u-gap>
			<view class="uni-form-item uni-column user-input">
				<view style="width: 90px; font-size: 16px;">售后 8D 单:</view>
				<view class="input">
					<image src="../../static/showImg.png" style="width: 80px; height: 80px;" @click="getImgIndex8D"></image>
				</view>
			</view> -->
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="3">
					<view class="title">处置方案：</view>
					<view class="englishInfo">DisposalPlan</view>
				</u-col>
				<u-col span="8">
					<text class="info">{{disposalPlan}}</text>
				</u-col>
			</u-row>
			<u-gap height="116rpx" bgColor="#ffffff "></u-gap>
			<view class="feedBottom"  >
				<view v-if="evaluationNum == 0 && status =='已完成' " class="submit" @click="evaluate">去评价</view>
				<view v-else-if="evaluationNum != 0 && status == '已完成'" class="submit" @click="evaluate">查看评论</view>
				<view v-else-if="status == '未完成'" class="submit" @click="unableComment">无法评论</view>
			</view>
			
		</view>
		
		
	</view>
</template>

<script>
	let msg;
	export default {
		data() {
			return {
				workordernumber: '',	// 流水号
				worktime: '', 		  // 工单日期 
				serialnumber: '', //序列号
				devicetype: '',  // 设备类型
				devicemodel: '',  // 设备型号
				deliverytime: '', // 出厂时间
				productiongroup: '',  // 生产组别
				customername: '',    // 客户姓名
				productionleader: '',  // 生产负责人 
				contacts: '',		   // 客户联系人 
				customerphone: '',     // 客户 电话
				position: '',         // 职位 
				problemdescription: '',  //问题描述
				detailspath: '',          // 问题 图片
				status: '',               // 工单状态 
				workendtime: '',		 //  完成日期 
				dispatchedPersonnel: '',  //派遣人员
				remark: '',					// 备注
				confirmationForm: '',  		// 售后确认单
				disposalPlan: '',			// 处置方案
				afterSales8DForm: '',       // 售后 8D 单
				evaluationNum: '',			// 评价 条数    
				
				imgList:[],  
				imgList8D:[],
				faultImgList: [],
				
			};
		},
		onLoad(option) {
			msg = JSON.parse(decodeURIComponent(option.data))
			this.evaluationNum = msg.evaluationNum;
			console.log(msg.workid,"---工单id----",this.evaluationNum)
			uni.request({
				url: 'https://www.smacaftersales.com:443/workOrder/workOrder/findWorkOrderByworkid',
				method: 'GET',
				data:{ workid: msg.workid },
				success: (res) => {
					console.log(res)
					const data = res.data.data[0].confirmationForm
					console.log("***data *",data)
					if(data != null && data != ''){
						const urls = data.split(",");
						for (var i = 0; i < urls.length-1; i++) {
							console.log(urls[i])
							this.imgList.push(urls[i])
						}
					}else{
						this.imgList.push("http://121.5.128.59:9000/picture/dbd2716b13b54127851148fcdda7d4d7.jpg")
					}
					
					const data2 = res.data.data[0].afterSales8DForm
					if (data2 != null && data2 != '') {
						const urls2 = data2.split(",");
						for (var i = 0; i < urls2.length-1; i++) {
							this.imgList8D.push(urls2[i])    
						}
					}else{
						this.imgList8D.push("http://121.5.128.59:9000/picture/dbd2716b13b54127851148fcdda7d4d7.jpg")
					}
					
					const faultData = res.data.data[0].detailspath
					if (faultData != null && faultData != '') {
						const faultUrls = faultData.split(",");
						for (var i = 0; i < faultUrls.length-1; i++) {
							this.faultImgList.push(faultUrls[i]) 
						}
					}else{
						this.faultImgList.push("http://121.5.128.59:9000/picture/dbd2716b13b54127851148fcdda7d4d7.jpg")
					}
					
					this.workordernumber = res.data.data[0].workordernumber
					this.worktime = res.data.data[0].worktime
					this.serialnumber = res.data.data[0].serialnumber
					this.devicetype = res.data.data[0].devicetype
					this.devicemodel = res.data.data[0].devicemodel
					this.deliverytime = res.data.data[0].deliverytime
					this.productiongroup = res.data.data[0].productiongroup 
					this.customername = res.data.data[0].customername
					this.productionleader = res.data.data[0].productionleader
					this.contacts = res.data.data[0].contacts
					this.customerphone = res.data.data[0].customerphone
					this.position = res.data.data[0].position
					this.problemdescription = res.data.data[0].problemdescription
					this.detailspath = res.data.data[0].detailspath
					this.status = res.data.data[0].status
					this.workendtime = res.data.data[0].workendtime  
					this.dispatchedPersonnel = res.data.data[0].dispatchedPersonnel
					this.remark = res.data.data[0].remark
					this.confirmationForm = res.data.data[0].confirmationForm
					this.disposalPlan = res.data.data[0].disposalPlan
				}
			})
		},
		onShow() {
			
		},
		methods: {
			// 图片 预览
			getImgIndex(){
				// console.log(this.img)
				// var imgPaths = [];
				// imgPaths.push(this.detailspath)
				uni.previewImage({
					urls: this.imgList,
					current:0  ,//点击图片传过来的下标	
				})
			},
			// getImgIndex8D(){   // 8D单
			// 	uni.previewImage({
			// 		urls: this.imgList8D,
			// 		current:0  ,//点击图片传过来的下标	
			// 	})
			// },
			faultImg(){
				uni.previewImage({
					urls: this.faultImgList,
					current:0  ,//点击图片传过来的下标	
				})
			},
			evaluate(){
				console.log("----评价-- --")
				let data = {
					workid: msg.workid,
					dispatchedPersonnel: this.dispatchedPersonnel,
					workendtime: this.workendtime,
					customername: this.customername
				}
				uni.navigateTo({
					url:'/pages/clientVue/userEvaluation?data='+encodeURIComponent(JSON.stringify(data))
				})
			},
			unableComment(){
				uni.showToast({
					title:'订单未完成，无法进行评价',
					icon:'none'
				})
			}

		}
	}
</script>

<style lang="scss">
	.englishInfo{
		color: #74daff;
		align-items: center;//子控件垂直居中
		justify-content: center;//子控件水平居中
	}
	.info{
		font-size: 17px;
		color: #ababab;
	}
	.title{
		// width: 50px;
		height: 20px;
		font-size: 16px;
		font-weight: bold;
		display: flex; 
		justify-content: center;
	}
.user-input{
	width: 390px;
	margin: 8px 10px;
	display: flex;
	.input{
		width: 260px;
		margin-left: 10px;
	}
}

.fenjie{
	width: 390px;
	height: 1px;
	background: #ddd;
	margin: 0 auto;
}

.up-button{
	width: 160px;
	height:40px;
	background: #488ac7;
	border-radius: 4px;
	font-size: 16px;
	line-height: 40px;
	color: white;
	margin-top: 30px;
}

.notes{
	width: 335px;
	margin: 0px auto 15px;
	font-size: 14px;
	font-weight: bold;
	span{
		color: red;
		margin-right: 4px;
	}
	p{
		color: #999;
	}
}
.feedBottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 116rpx;
		background: #FFFFFF;
 
		.submit {
			width: 646rpx;
			height: 88rpx;
			background: #458fff;
			border-radius: 50rpx;
			font-size: 36rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
</style>
